今までずっと理解しようとすらしてこなかった Vue のスコープ付きスロットを学ぶ

https://scrapbox.io/files/69364b832cd02ea32a942f77.png

code:js

// 親コンポーネントがスロットコンテンツを渡す

FancyButton("Click Me!");

// FancyButton がスロットコンテンツを自身のテンプレート内でレンダリングする

function FancyButton(slotContent) {

return `<button class="fancy-button">

${slotContent}

</button>`

}

名前付きスロット

code:vue

<div class="container">

<header>

<!-- ここに header コンテンツが必要 -->

</header>

<main>

<!-- ここに main コンテンツが必要 -->

</main>

<footer>

<!-- ここに footer コンテンツが必要 -->

</footer>

</div>

code:vue

<div class="container">

<header>

<slot name="header"></slot>

</header>

<main>

<slot></slot>

</main>

<footer>

<slot name="footer"></slot>

</footer>

</div>

親側では⬇️のように使う

code:vue

<BaseLayout>

<template v-slot:header>

<!-- header スロットのためのコンテンツ -->

</template>

</BaseLayout>

または

code:vue

<BaseLayout>

<!-- header スロットのためのコンテンツ -->

</template>

</BaseLayout>

https://scrapbox.io/files/69364e3315cd5f82749b8212.png

code:js

// 複数のスロットフラグメントを異なる名前で渡す

BaseLayout({

})

// <BaseLayout> がそれらを異なる場所でレンダリングする

function BaseLayout(slots) {

return `<div class="container">

<header>${slots.header}</header>

<main>${slots.default}</main>

<footer>${slots.footer}</footer>

</div>`

}

ここまではなんとなく理解できている

問題はスコープ付きスロット

つまり、親側で定義されているもののみを基本的にはスロットコンテンツとしてして取ることができる

けどスロットのコンテンツが親のスコープと子のスコープのどちらも参照できると便利なこともある

これの実現のためにはレンダリング時に子がデータをスロットに渡すことができる必要がある

code:vue

<!-- <MyComponent> template -->

<div>

<slot :text="greetingMessage" :count="1"></slot>

</div>

スロット props を受け取るのは、デフォルトスロットと名前付きスロットを使用するのとは少し異なる

code:vue

<MyComponent v-slot="slotProps">

{{ slotProps.text }} {{ slotProps.count }}

</MyComponent>

https://scrapbox.io/files/693651707b3b65c5f752c531.png

分割代入もできる

code:vue

<MyComponent v-slot="{ text, count }">

{{ text }} {{ count }}

</MyComponent>

名前およびスコープ付きスロット​もあるみたい

これが多分一番理解できてない

単純に⬇️の感じ

code:vue

<MyComponent>

{{ headerProps }}

</template>

{{ defaultProps }}

</template>

{{ footerProps }}

</template>

</MyComponent>

子側で⬇️のようにして props を渡す

code:vue

<slot name="header" message="hello"></slot>

code:vue

<!-- <MyComponent> template -->

<div>

<slot :message="hello"></slot>

<slot name="footer" />

</div>

code:vue

<!-- この書き方はダメ(コンパイルされない) -->

<MyComponent v-slot="{ message }">

<p>{{ message }}</p>

<!-- message はデフォルトスロットに属しているからここでは使用できない -->

<p>{{ message }}</p>

</template>

</MyComponent>

code:vue

<MyComponent>

<!-- 明示的なデフォルトスロットを使用する -->

<p>{{ message }}</p>

</template>

<p>Here's some contact info</p>

</template>

</MyComponent>

(ちょっとややこしいけど確かに良さそうな気がする)

defineSlots マクロ

スコープ付きスロットの型定義のため